<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--<link rel="stylesheet" type="text/css" href="../css/font.css"/>-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/authenticate.css" />
		<link href="../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.mui-action-back {
				color: #fff;
			}
			
			.mui-bar .mui-btn-link {
				color: #fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">紧急联系人</h1>
			<span class="mui-btn-link mui-pull-right">资质</span>
		</header>
		<div class="mui-content contact">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell down">
					<span>联系关系</span>
					<span>未选择</span>
					<span class="mui-pull-right icon fa fa-angle-down"></span>
				</li>
				<li class="mui-table-view-cell ph" data='1'>
					<span>姓名</span>
					<!--<span id="linkman-">请输入您的真实姓名</span>-->
					<input id="linkman" type="text" placeholder="请输入您的真实姓名" />
				</li>
				<li class="mui-table-view-cell ph" data='1'>
					<span>电话</span>
					<span id="linkphone-">请输入电话号码</span>
					<input id="linkphone" type="text" placeholder="请输入电话号码" disabled="disabled" style="display: none;" />
					<span class="icon fa fa-phone-square mui-pull-right"></span>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell down">
					<span>联系关系</span>
					<span>未选择</span>
					<span class="mui-pull-right icon fa fa-angle-down"></span>
				</li>
				<li class="mui-table-view-cell ph" data='2'>
					<span>姓名</span>
					<!--<span id="linkman2-">请输入您的真实姓名</span>-->
					<input id="linkman2" type="text" placeholder="请输入您的真实姓名" />
				</li>
				<li class="mui-table-view-cell ph" data='2'>
					<span>电话</span>
					<span id="linkphone2-">请输入电话号码</span>
					<input id="linkphone2" type="text" placeholder="请输入电话号码" disabled="disabled" style="display: none;" />
					<span class="icon fa fa-phone-square mui-pull-right"></span>
				</li>
			</ul>
			<!--<ul class="mui-table-view">
				<li class="mui-table-view-cell down">
					<span>联系关系</span>
					<span>未选择</span>
					<span class="mui-pull-right icon fa fa-angle-down"></span>
				</li>
				<li class="mui-table-view-cell">
					<span>姓名</span>
					<input type="text" placeholder="请输入您的真实姓名" />
				</li>
				<li class="mui-table-view-cell">
					<span>电话</span>
					<input type="text" placeholder="请输入电话号码" />
					<span class="icon fa fa-phone-square mui-pull-right"></span>
				</li>
			</ul>-->
			<!--<button type="button" class="mui-btn mui-btn-yellow mui-btn-block">+添加紧急联系人</button>-->
		</div>
		<input style="display: none;" name="relationship" />
		<input style="display: none;" name="relationship" />
		<button type="button" class="mui-btn mui-btn-yellow mui-btn-block">保存紧急联系人</button>
		<script src="../lib/mui.min.js"></script>
		<script type="text/javascript" src="../lib/jquery-1.11.0.js"></script>
		<script src="../lib/mui.picker.min.js"></script>
		<script src="../lib/mui.poppicker.js"></script>
		<script type="text/javascript" src="../lib/service.js"></script>
		<script type="text/javascript" src="../lib/Verification.js"></script>
		<script>
			//	提交临时变量
			var temp = [];
			tempjson = [];
			var userPicker = new mui.PopPicker();
			//选择栏中变量
			var relationArray = [{
				value: '3',
				text: '夫妻'
			}, {
				value: '1',
				text: '父母'
			}, {
				value: '4',
				text: '亲戚'
			}, {
				value: '2',
				text: '朋友'
			}];
			userPicker.setData(relationArray);
			//监听联系人关系按钮
			$('.contact').on('tap', 'ul li.down', function() {
				console.log($('.down').index(this))
				var index = $('.down').index(this);
				var text = $('.mui-table-view').eq(index).find('li').eq(0).find('span').eq(1).text();
				//				console.log(text)
				userPicker.show(function(items) {
					//					var obj = {
					//						pos: index,
					//						relationship: items[0].value
					//					};
					$("input[name='relationship']").eq(index).val(items[0].value)

					//								JSON.stringify()
					//						sessionStorage.setItem("relationship", JSON.stringify(tempjson));
					$('.mui-table-view').eq(index).find('li').eq(0).find('span').eq(1).text(items[0].text);
					//							userResult.innerText = JSON.stringify(items[0]);
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			})

			//身份信息跳转
			$('.ph').bind('tap', function() {
				console.log($(this).attr('data'))
				openurl('../auth/phone_list.html', JSON.stringify({
					pos: $(this).attr('data')
				}))
			})
			String.prototype.replaceAll = function(str, repaceStr) {
				return this.replace(new RegExp(str, "gmi"), repaceStr)
			}

			function setData(data) {
				console.log(typeof data);
				data = JSON.parse(data)
				if(data.pos == 1) {
					$('#linkman').val(data.name)
					$('#linkman-').html(data.name)
					var linkphone = data.phone
					$('#linkphone').val(linkphone.replaceAll("-", ""));
					$('#linkphone-').html(data.phone)
				} else {
					$('#linkman2').val(data.name)
					$('#linkman2-').html(data.name)
					var linkphone2 = data.phone
					$('#linkphone2').val(linkphone2.replaceAll("-", ""));
					$('#linkphone2-').html(data.phone)
				}

			}
			$('.mui-btn-block').bind('tap', function() {
				var linkphone = $('#linkphone').val();
				linkphone = linkphone.trim();
				linkphone = linkphone.replaceAll(' ',"");
				linkphone = linkphone.replaceAll('-',"");
				var linkphone2 = $('#linkphone2').val();
				linkphone2 = linkphone2.trim();
				linkphone2 = linkphone2.replaceAll(' ',"");
				linkphone2 = linkphone2.replaceAll('-',"");
				if($("input[name='relationship']").eq(0).val() == "") {
					mui.toast("请选择第一联系人关系")
					return;
				}
				if($('#linkman').val() == "") {
					mui.toast("请填写姓名")
					return;
				}
				if($('#linkphone').val() == "") {
					mui.toast("请填写电话号")
					return;
				}

				if(!isPoneAvailable(linkphone)) {
					mui.toast("请正确填写电话号")
					return;
				}
				if($("input[name='relationship']").eq(1).val() == "") {
					mui.toast("请选择第二联系人关系")
					return;
				}
				if($("input[name='relationship']").eq(0).val() == $("input[name='relationship']").eq(1).val()) {
					mui.toast("关系重复，请重新选择")
					return;
				}
				if($('#linkman2').val() == "") {
					mui.toast("请填写姓名")
					return;
				}
				if($('#linkphone2').val() == "") {
					mui.toast("请填写电话号")
					return;
				}
				if(!isPoneAvailable(linkphone2)) {
					mui.toast("请正确填写电话号")
					return;
				}
				var subData = {
					linkman: $('#linkman').val(),
					linkphone: linkphone,
					relation: $("input[name='relationship']").eq(0).val(),
					linkman2: $('#linkman2').val(),
					linkphone2: linkphone2,
					relation2: $("input[name='relationship']").eq(1).val()

				}
				//				console.log(JSON.stringify(subData))
				postServer('app/member/contact', $.param(subData), function(res) {
					console.log(JSON.stringify(res))
					mui.toast(res.message)
					plus.webview.getLaunchWebview().evalJS("activeModel()")
					plus.webview.currentWebview().close()
				});
			})
			//返回资质列表
			$('.mui-btn-link').bind('tap', function() {
				plus.webview.getWebviewById('../real-name/real-name.html').close();
				plus.webview.currentWebview().close()
			})
			String.prototype.replaceAll = function(s1, s2) {
				return this.replace(new RegExp(s1, "gm"), s2);
			}
		</script>
	</body>

</html>